<template>
    <div class="display-setting">
        <div class="head">
            <div class="head-item" :style="{color:activeName===1?'#21cc96':''}" @click="clickTag">显示指标</div>
            <div class="head-item" :style="{color:activeName===2?'#21cc96':''}" @click="clickGroups">显示分组</div>
            <div class="bottom_class" :style="{transform:`translateX(`+leftX+`px)`}"></div>
        </div>
        <div class="box">
                <div class="box-groups" :style="{display:activeName===1?'':'none'}">
                    <el-checkbox-group v-model="checkedTags" @change="handleTags"
                                       style="max-height: 100px;">
                        <el-checkbox class="box-item" v-for="(tag,index) in tags" :label="tag" :key="tag" :disabled="index>1">{{tag}}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <div class="box-groups" :style="{display:activeName===2?'':'none'}">
                    <el-checkbox class="box-item" :indeterminate="isIndeterminate" v-model="checkedByValuesAll"
                                 @change="handleCheckAllChange">全选
                    </el-checkbox>
                    <el-checkbox-group v-model="checkedByValues" @change="handleByValue"
                                       style="max-height: 100px;">
                        <el-checkbox class="box-item" v-for="byValue in byValues" :label="byValue" :key="byValue">{{byValue==='$ALL'?'总体':byValue}}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
        </div>
    </div>
</template>

<script>
    import DataType from "./dataType.config"
    export default {
        name: "displaySetting",
        props:{
            report:{
                type:Object,
                default: null
            }
        },
        data() {
            return {
                isIndeterminate: true,
                //控件动画需要
                leftX: 0,
                //当前是显示控指标还是分组
                activeName: 1,
                //最大值 最小值 数组
                tags: DataType.tags,
                //当前选择的指标
                checkedTags: ['最大值','最小值','平均值','四分位','中位数'],
                //当前选择的分类
                checkedByValues: [],
                //是否全选分类
                checkedByValuesAll:false
            }
        },
        computed:{
          byValues:function () {
              return this?.report?.byValues
          }
        },
        created() {
            this.$watch('report', () => {
                this.checkedByValues = this.report.byValues
            });
        },
        methods: {
            clickTag() {
                this.activeName = 1;
                this.leftX = 0
            },
            handleTags(){
                this.$emit("selectTags",this.checkedTags)
            },
            clickGroups() {
                this.activeName = 2;
                this.leftX = 134
            },
            handleCheckAllChange(val) {
                this.checkedByValues = val ? this.report.byValues : [];
                this.isIndeterminate = false;
            },
            handleByValue(value) {
                let checkedCount = value.length;
                this.checkedByValuesAll = checkedCount === this.checkedByValues.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.report.byValues.length;
                this.$emit("selectByValues",this.checkedByValues)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .display-setting {
        height: 180px;

        .head {
            background-color: #f9f9fa;
            display: flex;
        }

        .head-item {
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 45px;
            width: 134px;
        }

        .bottom_class {
            content: '';
            position: absolute;
            width: 134px;
            height: 2px;
            top: 45px;
            background-color: #21cc96;
            transition: all 0.4s ease;
        }


        .box {
            height: 100%;
            overflow-x: auto;

            .box-groups {
                height: 100%;
                position: relative;
                padding: 4px 0px 0px 4px;
                .box-item {
                    padding: 8px 10px 8px 10px;
                    width: 158px;
                    box-sizing: border-box;
                }
            }

        }


    }
</style>